<!--
 * @Descripttion: 维修列表
 * @version: 
 * @Author: gonghong
 * @Date: 2023-07-05 09:43:20
-->

<script setup>
import { reactive, ref } from 'vue'
import { onPullDownRefresh, onShow, onLoad } from '@dcloudio/uni-app'
import { getRepairOrderListByOperator } from '@/api/system'
import listItem from './list-item'
import empty from '@/components/empty/empty'

//分段显示器
const segmentedItem = reactive(['未处理', '已处理'])
const activeColor = ref('#007aff')
const current = ref(0)

const orderStatusArr = ['DISPATCHED', 'HANDLED,EVALUATE']

//刷新分页页码
const pageNum = ref(1)

//工单数据列表
const wordOrderData = reactive([])

/**
 * @function 分段选择器未安装/已安装
 * @param {*} e
 * @return {*}
 */
const tabsClickItem = (e) => {
  if (current.value != e.currentIndex) {
    current.value = e.currentIndex
    /**
     * 1。切换-从新请求数据
     * 2、请求参数pageNum重置为1
     */
    pageNum.value = 1
    refreshLiData()
  }
}

onShow(async () => {
  refreshLiData()
})

/**
 * @function 下拉刷新
 * @return {*}
 */
onPullDownRefresh(async () => {
  pageNum.value = pageNum.value + 1
  //1、从新调用接口获取数据.
  //2、停止下拉刷新.
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)
  uni.stopPullDownRefresh()
})

/**
 * @function 重置刷新列表
 * @return {*}
 */
const refreshLiData = async () => {
  wordOrderData.length = 0
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)
}

/**
 * @function 根据页码加载安装设备工单列表数据
 * @return {*}
 */
const getList = async () => {
  uni.hideLoading()
  const result = await getRepairOrderListByOperator({
    pageNum: pageNum.value,
    descs: ['dispatch_time'],
    condition: {
      orderStatus: orderStatusArr[current.value]
    }
  })
  const resultData = result.data?.records || []
  return resultData
}
</script>

<template>
  <view class="container">
    <uni-segmented-control
      :current="current"
      :values="segmentedItem"
      styleType="text"
      :activeColor="activeColor"
      @clickItem="tabsClickItem"
    />
    <view class="content">
      <list v-if="wordOrderData && wordOrderData.length">
        <listItem v-for="item in wordOrderData" :key="item.id" :item="item" />
      </list>
      <empty v-else context="暂无维修信息" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
  overflow-y: auto;
}
</style>
